<%--
  Created by IntelliJ IDEA.
  User: Fan
  Date: 2016/9/27
  Time: 21:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>用户注册</title>
    <script language = "javascript" src = "/VerifiCode/code.js"></script>
    <link rel="stylesheet" type="text/css" href="/VerifiCode/code.css">
    <style type="text/css">
        body{
            background-image: url(/images/background.jpg);
            /*background-repeat: repeat-x;*/
            background-size:100%;
        }
        #back{

            float: left;
            margin-left: 70px;
        }
        #forward{
            float: right;
            margin-right: 70px;
        }
        .bottom{
            position: absolute;
            bottom: 50px;
            left: 0;
            height: 20px;
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
        //        var inputCode = document.getElementById("input1").value.toUpperCase();
        //        var codeToUp = code.toUpperCase();

        function registe(form) {
            var inputCode=form.verificode.value.toUpperCase();
            var codeToUp=form.checkCode.value.toUpperCase();
//            alert(codeToUp);
            if (form.phone.value == "") {
                alert("请输手机号");
                return false;
            }
            if(!reg.test(form.phone.value)){
                alert("请确认11位手机号");
                return false;
            }
            if (form.password.value == "") {
                alert("请填密码");
                return false;
            }
            if (form.repassword.value == "") {
                alert("请填确认密码");
                return false;
            }
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
                return false;
            }
            if (inputCode != codeToUp) {
                alert("验证码输入错误！");
                createCode();
                return false;
            }
//            if (form.verifcode.value == "") {
//                alert("请填写验证码");
//                return false;
//            }
            if (form.password.value != form.repassword.value) {
                alert("两次密码验证错误");
                return false;
            }
        }
    </script>
</head>

<body onload="createCode();">
<ul>
    <li><a href="UserLogin.jsp">用户登录</a></li>
</ul>
<form action="${pageContext.request.contextPath}/UserRegServlet" method="post"
      onsubmit="return registe(this);">
    <table align="center" width="450" border="0">
        <tr>
            <td align="right">手机</td>
            <td><input type="text" name="phone"></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td><input type="password" name="repassword"></td>
        </tr>
        <tr>
            <td align="right">验证码</td>
            <td><input type="text" id="input1" name="verificode" />

            <td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" id="checkCode" name="checkCode" class="code" style="width: 55px" />
                <a href="#" onclick="createCode()">看不清楚</a>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>
<div class="bottom"><img id="back" src="/images/arrow_left_24x24.png" onclick="window.history.back()"><img id="forward" src="/images/arrow_right_24x24.png" onclick="window.history.forward()"></div>
</body>
</html>
